<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <link rel="stylesheet" href="./css/reg.css">
    <script src="./js/utils.js"></script>
    <script src="./js/jquery.js"></script>
    <script src="./js/axios.js"></script>
    <script src="./js/js/layer/layer.js "></script>
</head>

<body>
    <div class="head">

        <a href="./login.html"> <img src="./images/logo-icon.png" alt=""></a>
        <img src="./images/slogan.png" alt="">


    </div>
    <div class="content">

        <h1>注册万表会员</h1>


        <form>
            <div class="container">
                <div class="box"> <input type="text" name="name" placeholder="请输入手机号码" class="tel">
                    <span></span>
                    <div class="img"> <img src="./images/phone.jpg" alt=""></div>
                </div>




                <div class="box">
                    <input type="text" name="code" placeholder="请输入验证码" class="code">
                    <em class="code1"></em>
                    <span></span>
                    <div class="img"> <img src="./images/aq.jpg" alt=""></div>
                </div>

                <div class="box">
                    <input type="text" name="utelcode" placeholder="获取短信验证码" class="code">
                    <em>获取验证码</em>
                    <div class="img"> <img src="./images/aq.jpg" alt=""></div>
                </div>


                <div class="box"> <input type="text" name="pwd" placeholder="请输入密码">
                    <span></span>
                    <div class="img"> <img src="./images/ys.jpg" alt=""></div>
                </div>

                <div class="box"><input type="text" name="pwd1" placeholder="请你确认密码">
                    <span></span>

                    <div class="img"> <img src="./images/ys.jpg" alt=""></div>
                </div>





                <button>立即注册</button>
                <p>点击立即注册,即代表你同意遵守<span>万表网用户协议</span></p>
            </div>

        </form>
    </div>
</body>


</html>
<script>
    var oShowCode = document.querySelector(".code1")

    var oForm = document.forms[0];

    window.onload = function () {
        let code = Utils.randomCode();
        oShowCode.innerHTML = code
        oShowCode.setAttribute("code1", code);

        oShowCode.onclick = function () {
            let code = Utils.randomCode();
            oShowCode.innerHTML = code
            oShowCode.setAttribute("code1", code);
        }
    }

    var ValidateObj = {

        pwdFlag: false,
        pwdFlag2: false,
        phoneFlag: false,
        codeFlag: false
    }
    //密码
    oForm.pwd.oninput = function () {
        ValidateObj.pwdFlag = Utils.validate(this, /^\S{6,18}$/, "密码不合法");
    }
    //确认密码
    oForm.pwd1.oninput = function () {

        ValidateObj.pwdFlag2 = oForm.pwd.value == this.value;
        if (ValidateObj.pwdFlag2) {
            this.nextElementSibling.innerHTML = "<span></span>"
        } else {
            this.nextElementSibling.innerHTML = "<span></span>俩次密码不一致"
        }

    }



    oForm.name.oninput = function () {
        ValidateObj.phoneFlag = Utils.validate(this, /^[1][3-9]\d{9}$/, "手机号不合法");
    }

    oForm.code.oninput = function () {
        ValidateObj.codeFlag = this.value == this.nextElementSibling.getAttribute("code1")
        if (ValidateObj.codeFlag) {
            this.nextElementSibling.nextElementSibling.innerHTML = "<span class='right'></span>"
        } else {
            this.nextElementSibling.nextElementSibling.innerHTML = "<span class='wrong'></span>验证码错误"
        }
    }

    /*     oForm.onsubmit = function () {
            for (var key in ValidateObj) {
                if (ValidateObj[key] == false) {
                    return false;
                }
            }
            try {
                //1.获取输入的数据
                var oUser = Utils.getFormData(this);
                   console.log(oUser); 
       //2.获取本地数据
     oUserList = JSON.parse(localStorage.getItem("users") || '[]');
   
         var isReg = oUserList.some(function (item) {
             return item.username == oUser.username
         })
         if (isReg) {
   
             alert("该用户已注册");
             return false;
         }
   
         oUserList.push(oUser)
         localStorage.setItem("users", JSON.stringify(oUserList));
         alert("注册成功!");
         location = "./login.html";
     } catch (error) {
         console.log(error);
     }
     return false;
   }  */

    oForm.onsubmit = function () {
        for (var key in ValidateObj) {
            if (ValidateObj[key] == false) {
                return false;


            }


        }



        axios.post("/account/register", {
            name: this.name.value,
            pwd: this.pwd.value,


        }).then(function (res) {
            console.log(res);
            let { data: { msg, code } } = res;
            layer.msg(msg);
            if (code == 200) {
                //询问是否理解去登录
                layer.confirm("注册成功!,是否去登录?", {
                    icon: 1,
                    btn: ["是", "否"]
                }, function (index) {
                    layer.close(index);
                    location = "login.html";
                }, function () {

                })
            }

        })

        // console.log(this.sex.value,);


        return false;

    }




</script>